<!DOCTYPE html>
<html lang="en" style="background-color: rgb(243, 243, 240);">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport"        
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>订单列表</title>
    <link rel="stylesheet" href="../public/css/footer.css">
    <link rel="stylesheet" href="../public/css/reset.css">
    <link rel="stylesheet" href="../public/css/all_use.css">
    <link rel="stylesheet" href="../public/css/ddlb.css">
    <script src="../public/js/utils/utils.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
</head>

<body>
    <div id="app">
        <van-tabs v-model="active" @click="fukuan">
            <van-tab title="待付款" swipeable="true"></van-tab>
            <van-tab title="待发货" swipeable="true"></van-tab>
            <van-tab title="待收货" swipeable="true"></van-tab>
            <van-tab title="已完成" swipeable="true"></van-tab>
        </van-tabs>
        <div class="xgym" v-if="datalist.length == 0">
            <img src="../public/img/xgdd.png" style="width: 100px;height: 100px;">
            <div class="wz">您还没有相关的订单</div>
            <div class="wz2">可以去看看有哪些想买的</div>
            <div class="orderbox" onclick="router('/app/store.html')">随便逛逛</div>
        </div>
        <div style="display: flex;height: 120px;margin-top: 10px;width: 96%;margin-left: 2%;background-color: #fff;"
            v-for="(item,i) in datalist" v-if="datalist.length != 0">
            <img :src="item.spimage" style="height: 100px;width: 100px;margin-top: 10px;margin-left: 10px;">
            <div style="width: 100%;">
                <div class="ddxq">{{item.spname}}
                    <div class="an1" v-if="item.isPay==1 && item.refund == 0 && item.state !=0 && item.state !=3"
                        @click="tuihuo(item.uuid)">退货</div>
                    <div class="state" v-if="item.isPay==1 && item.refund == 1">申请退货中</div>
                    <div class="state" v-if="item.isPay==1 && item.refund == 2">退款中</div>
                    <div class="state" v-if="item.isPay==2 && item.refund == 2">退款成功</div>
                    <div class="state" v-if="item.isPay==2 && item.refund == 3">拒绝退货</div>
                </div>
                <div class="ddan">
                    <div class="ddn">共{{item.number}}件
                        <span style="color: red;">￥:{{item.price}}元</span>
                        <span class="an" v-if="item.isPay==0 && item.state==0" @click="jixu(item.id)">继续付款</span>
                        <span class="an" v-if="item.isPay==1 && item.state==2 && item.refund==0 || item.refund==3"
                            @click="received(item.id)">确认收货</span>
                    </div>
                </div>
            </div>
            <van-dialog v-model="show" title="是否退货" show-cancel-button="true" confirm-button-text="确认退货"
                confirm-button-color="#11BD10" @confirm="zf(item.uuid,item.state)">
                <div>请确认是否退货</div>
            </van-dialog>
            <van-dialog v-model="showq" title="确认收货" show-cancel-button="true" confirm-button-text="确认收货"
                confirm-button-color="#11BD10" @confirm="zf1(item.id,item.state)">
                <div>请确认是否收到货物</div>
            </van-dialog>
        </div>
    </div>
    </div>
</body>
<script type="module">
    import ajax from "../public/js/api/api.js";
    var app = new Vue({
        el: '#app',
        data: {
            account: {},
            active: '',
            datalist: [],
            show: false,
            showq: false,
        },
        created() {
            this.fun9();
            this.openid = this.GetRequest().openid;
            this.findAccountById(this.GetRequest().openid);
            setTimeout(() => {
                this.fukuan(0);
            }, 100);
        },
        methods: {
            // 获取路径后携带的参数
            GetRequest() {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(
                            strs[i].split("=")[1]
                        );
                    }
                }
                return theRequest;
            },
            jixu(id) {
                ajax
                    .goPay({
                        id: id,
                    })
                    .then((res) => {
                            // console.log(res, "=====---=====");
                            WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                            "appId": res.data.data.appId,     //公众号ID，由商户传入
                            "timeStamp": res.data.data.timeStamp,         //时间戳，自1970年以来的秒数
                            "nonceStr": res.data.data.nonceStr, //随机串
                            "package": res.data.data.package,
                            "signType": res.data.data.signType,         //微信签名方式：
                            "paySign": res.data.data.paySign //微信签名
                        },
                            function (res) {
                                console.log(88);
                                if (res.err_msg === "get_brand_wcpay_request:ok") {
                                    // console.log("支付成功")
                                    //抽取卡片
                                    // that.sex = sex
                                    // that.start()
                                    setTimeout(() => {
                                        // that.start()
                                    }, 100)
                                    setTimeout(() => {
                                        // that.getCard(sex);
                                        // that.sex = null;
                                        // that.rotate = false;
                                    }, 4800)
                                }
                            }
                        );
                    })
            },
            tuihuo(uuid) {
                this.show = true
            },
            zf(uuid,state) {
                ajax
                    .updateRefund({
                        UUID: uuid,
                        isPay: 1,
                        refund: 1,
                        state: state
                    })
                    .then((res) => {
                        this.fukuan(state);
                    })
            },

            fukuan(e) {
                // console.log(id);
                ajax
                    .findAccountId({
                        accountId: this.account.id,
                        state: e,
                    })
                    .then((res) => {
                        if (res.data.code == 0) {
                            console.log(res.data.data);
                            this.datalist = res.data.data

                        }
                    })
            },
            fun9: function () {
                ajax
                    .zhifu({
                        url: window.location.href.split("#")[0],
                    })
                    .then((res) => {
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: res.data.data.appId, // 必填，公众号的唯一标识
                            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
                            signature: res.data.data.signature, // 必填，签名
                            jsApiList: ["chooseWXPay", 'updateTimelineShareData', 'updateAppMessageShareData'], // 必填，需要使用的JS接口列表
                        });
                    });
            },
            received(id) {
                this.showq = true
            },
            zf1(id,state) {
                ajax
                    .updateState({
                        id: id,
                        state: 3
                    })
                    .then((res) => {
                        this.fukuan(state);
                    })
            },
            findAccountById: function (openid) {
                if (openid !== undefined) {
                    // console.log(888);
                    ajax
                        .findAccountById({
                            openId: openid
                        })
                        .then((res) => {
                            if (res.data.code == 0) {
                                this.account = res.data.data;
                                console.log(this.account);
                            }
                        })
                } else {
                    ajax
                        .findAccount2({})
                        .then((res) => {
                            if (res.data.code == 0) {
                                this.account = res.data.data;
                            }
                        })
                }
            },
        }
    })


</script>

</html>